<template>
  <div style="width: 100%; height: 100%; background-color: black" @click="click_box()">
    <div
      style="
        width: 100%;
        height: 50px;
        color: #ffffff;
        line-height: 50px;
        text-align: center;
        position: fixed;
        z-index:1000;
      "
    >
      {{ num }}/{{ num_length }}
    </div>
    <div class="swiper-container" style="width: 100%; height: 100%">
      <div class="swiper-wrapper" style="width: 100%; height: 100%">
        <div
          class="swiper-slide"
          :key="index"
          v-for="(value, index) in sources"
          style="
            width: 100%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
          "
        >
          <img :v-if="value.type === 'image'" :src="value.url" alt="" width="100%" />
          <video :v-if="value.type === 'video'" :src="value.url" controls :poster="value.poster" width="100%"></video>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// Import Swiper styles
import "swiper/swiper-bundle.min.css";
import Swiper from "swiper/swiper-bundle.min.js";
export default {
    name:"onekit-previewmedia",
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    click_box() {
      this.$router.back(-1)
    }
  },
  beforeMount() {
    const sources = this.$route.query.sources;
    const current = this.$route.query.current;
    const showmenu = this.$route.query.showmenu;

    console.log(showmenu);
    this.num_length = sources.length;
    this.sources = sources;
    this.current = current
  },
  mounted() {
    var _this = this;
    const preview_swiper = new Swiper(".swiper-container", {
      // 是否循环
      loop: false,
      // 滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
      // 分页器
      pagination: {
        el: ".swiper-pagination",
      },
      on: {
        slideChangeTransitionStart: function () {
          _this.num = this.activeIndex + 1;
        }
      },
    });

    preview_swiper.slideTo(_this.current)
  },
};
</script>
